<template>
  <a-form-item
    hide-label
    :field="`conditions[${rowIndex}].operator`"
    validate-trigger="blur"
    :rules="{ required: true, message: '请选择操作符' }">
    <a-select
      v-model="modelValue"
      :options="operatorOptions"
      @change="handleOperatorChange">
    </a-select>
  </a-form-item>
</template>
<script lang="ts" setup>
import type { WafConditionItem } from '@/apis/model/waf'
import { useConfigStore } from '@/stores/config'

interface IProps {
  field: string
  init: boolean
  operator: string
  rowIndex: number
}
interface IEmit {
  (event: 'operator-change', value?: number): void
}
const props = withDefaults(defineProps<IProps>(), {})
const emits = defineEmits<IEmit>()
const modelValue = defineModel<string>({ required: true })

const configStore = useConfigStore()
// 操作符选项
const operatorOptions = computed(() => {
  const list = configStore.conditionQuery as WafConditionItem[]
  const operations = list.find(
    (item) => item.field?.field === props.field
  )?.operators
  return operations?.map((item) => ({
    label: item.show_name!,
    value: item.field! as string
  }))
})

const handleOperatorChange = (v: string) => {
  const list = configStore.conditionQuery as WafConditionItem[]
  const operations = list.find(
    (item) => item.field?.field === props.field
  )!.operators!
  const item = operations.find((item) => item.field === v)!
  emits('operator-change', item.value?.count)
}
</script>
